<template>
    <view class="content">
        <!-- 用户信息区域 -->
        <view class="user-info">
            <view class="avatar-section">
                <image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
                <view class="user-details">
                    <text class="user-name">李永超</text>
                    <text class="invite-code">邀请码：456971</text>
                    <text class="agent-type">代理商：（电）李永超</text>
                </view>
            </view>
        </view>

        <!-- 重叠卡片区域 -->
        <view class="overlap-container">
            <uni-card margin="20rpx 20rpx 20rpx 20rpx" spacing="15rpx" class="overlap-card">
                <view class="section-header">
                    <text class="section-title">我的订单</text>
                    <view>
                        <text class="view-all" @tap="viewAllOrders">全部订单 </text>
                        <uni-icons class="view-all" type="right" size="10" color="#aeaaaa"></uni-icons>
                    </view>
                </view>
                <view class="order-buttons">
                    <view class="order-btn" v-for="(item, index) in orderItems" :key="index"
                        @tap="handleOrderTap(item.type)">
                        <view class="order-icon">{{ item.icon }}</view>
                        <text class="order-label">{{ item.label }}</text>
                    </view>
                </view>
            </uni-card>
        </view>

        <!-- 功能菜单 -->
        <view class="menu-card">
            <view class="menu-item" v-for="(item, index) in menuItems" :key="index" @tap="handleMenuTap(item.type)">
                <view class="menu-left">
                    <text class="menu-text">{{ item.text }}</text>
                </view>
                <view class="menu-arrow">
                    <uni-icons type="right" size="20"></uni-icons>
                </view>
            </view>
        </view>

        <!-- 引入自定义tabBar -->
        <CustomTabBar />
    </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import uniCard from '@dcloudio/uni-ui/lib/uni-card/uni-card.vue'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

// 页面显示时通知tabBar更新选中状态
onShow(() => {
    uni.$emit('updateTabBar', 'views/user/user')
})

const orderItems = ref([
    { icon: '💰', label: '待支付', type: 'pending' },
    { icon: '📄', label: '已投保', type: 'insured' },
    { icon: '❌', label: '已取消', type: 'cancelled' },
    { icon: '⏰', label: '已过期', type: 'expired' }
])

const menuItems = ref([
    { text: '已出保单', type: 'policies' },
    { text: '邀请好友', type: 'invite' },
    { text: '我的团队', type: 'team' },
    { text: '系统设置', type: 'settings' }
])

// 方法
const viewAllOrders = () => {
    uni.showToast({
        title: '查看全部订单',
        icon: 'none'
    })
}

const handleOrderTap = (type) => {
    uni.showToast({
        title: `查看${type}订单`,
        icon: 'none'
    })
}

const handleMenuTap = (type) => {
    uni.showToast({
        title: `点击${type}`,
        icon: 'none'
    })
}
</script>

<style scoped>
.content {
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 用户信息区域样式 */
.user-info {
    background: #007AFF;
    padding: 40rpx 30rpx 90rpx 30rpx;
    /* 增加底部padding为卡片留出空间 */
    color: white;
    position: relative;
    z-index: 1;
}

.avatar-section {
    display: flex;
    align-items: center;
}

.avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.3);
    margin-right: 30rpx;
}

.user-details {
    flex: 1;
}

.user-name {
    font-size: 36rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 15rpx;
}

.invite-code,
.agent-type {
    font-size: 28rpx;
    display: block;
    margin-bottom: 8rpx;
    opacity: 0.9;
}

/* 重叠卡片容器 */
.overlap-container {
    position: relative;
    margin-top: -70rpx;
    /* 向上移动卡片，实现重叠效果 */
    z-index: 2;
}

.overlap-card {
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx;
    overflow: hidden;
    background-color: #ffffff;
}

.menu-card {
    padding: 10rpx 60rpx;
}

/* 订单区域样式 */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30rpx;
    margin-bottom: 10rpx;
    border-bottom: 1rpx solid #e5e2e2;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.view-all {
    font-size: 26rpx;
    color: #aeaaaa;
}

.order-buttons {
    display: flex;
    justify-content: space-around;
}

.order-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
}

.order-icon {
    font-size: 48rpx;
    margin-bottom: 15rpx;
}

.order-label {
    font-size: 26rpx;
    color: #666;
}

/* 功能菜单样式 */
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 10rpx;
    border-bottom: 1rpx solid #e5e2e2;
}

.menu-left {
    display: flex;
    align-items: center;
}

.menu-icon {
    font-size: 36rpx;
    margin-right: 20rpx;
    width: 50rpx;
    text-align: center;
}

.menu-text {
    font-size: 30rpx;
    color: #333;
}

.menu-arrow {
    color: #ccc;
    font-size: 28rpx;
}
</style>